<template>
    <div class="home-container">
<!--      加载图标-->
      <van-loading v-show="isLoading"  class="loading" size="24px" color="#42bBaa" vertical>加载中...</van-loading>
<!--      返回顶部-->
      <div class="goTop" @click="goBackTop" v-show="isShowGoTop">
        <img src="../../assets/image/goTop.png" alt="">
      </div>
<!--      nav导航-->
       <nav-bar>
         <div slot="center">图书兄弟</div>
       </nav-bar>
<!--      banner-->
<!--      <tab-nav></tab-nav>-->
      <div class="wrapper">
        <div class="content">
          <banner-view :bannerList="bannerList"></banner-view>
          <!--      Recommend-->
            <recommend :recommendList="recommendList"></recommend>
          <!--      tabControl-->
          <tab-control @collect="collectResh()" @currentIndex="getCurrentIndex" :goodsList="goodsList"></tab-control>
        </div>
      </div>

      <tab-bar></tab-bar>
    </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import BannerView from "./homeChilComponent/BannerView";
import Recommend from "./homeChilComponent/Recommend";
import TabControl from "./homeChilComponent/TabControl";
import TabBar from "../../components/tabbar/TabBar";
// import TabNav from "./homeChilComponent/TabNav";
import BScroll from 'better-scroll'
import {getHomeData,getHomeAllData} from "../../api/home/home";
export default {
  name: "Home",
  components:{
    NavBar,
    TabBar,
    BannerView,
    Recommend,
    TabControl
  },
  data(){
    return{
      bannerList:[],
      recommendList:[],
      page:1,
      currentIndex:0,
      goodsList:[],
      isLoading:true,
      isShowGoTop:false,
      bScroll: {}
    }
  },
  created() {
    this.getHomeData()

  },
  mounted() {
   this.$nextTick(()=>{
     this.bScroll = new BScroll(document.querySelector('.wrapper'),{
       probeType:3,
       click:true,
       scrollX:false,
       useTransition:false,
       scrollY:true,
       bounce:true,
       pullUpLoad:true,//上拉加载更多
     });
     console.log(this.bScroll)
   })
    this.getHomeSalesData()
    this.$nextTick(()=>{
      this.getScroll()
    })


  },

  methods:{
    getCurrentIndex(index){
      console.log(index);
      this.goodsList = []
      this.currentIndex = index
      this.isLoading = true
      this.page = 1
      this.getHomeSalesData()
    },
    async getHomeSalesData(){
      const res = await getHomeAllData(this.currentIndex,this.page)
      if(res){
        this.isLoading = false
        const {data:goodsList} = res.data.goods
        this.goodsList.push(...goodsList)
        console.log(this.goodsList);
      }

    },
    async getHomeData(){
      const res = await getHomeData()
      if(res){
        this.isLoading = false
        const {slides:bannerList} = res.data
        const {goods:goodList} = res.data
        this.bannerList = bannerList
        this.recommendList = goodList.data
        console.log(this.recommendList);
      }

    },
    getScroll(){
        this.bScroll.on('scroll',(position) =>{
        this.isShowGoTop =  -position.y > 2000
        console.log(position.y);
        // bScroll.refresh()
      })
      //监听上拉在家更多
      this.bScroll.on('pullingUp',async ()=>{
        this.page++
        await this.getHomeSalesData()
        // console.log(goodsList);
        this.bScroll.finishPullUp()
        this.bScroll.refresh()
      })
    },
    collectResh(){
      this.getHomeSalesData()
    },
    // 返回顶部
    goBackTop(){
      // //
      this.bScroll && this.bScroll.scrollTo(0,0,500)

      console.log('111')
    }
  }
}
</script>

<style scoped lang="css">
   .wrapper{
     height: 100vh;
   }
   .content{
     overflow: hidden;
   }
   .home-container{
    /*height: 100vh;*/
     /*position: absolute;*/
     marin-bottom:50px ;
     /*margin-bottom: 50px;*/
   }
   .goTop{
     width: 30px;
     height: 30px;
     position: absolute;
     bottom: 70px;
     right: 10px;
     z-index: 200;
   }
   .goTop img{
     width: 100%;
     height: 100%;
   }

</style>